<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        ul {
            width: 23%;
        }

        li {
            width: 100%;
            border: 1px solid #000;
            margin-bottom: 15px;
            /* background-image: linear-gradient(pink, pink); */
            background: url(./f1.jpeg) 5%;

        }

        li>img {
            width: 100%;
            display: block;
            object-fit: wrap;
        }
    </style>
</head>

</div>

<body>
    <div class="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <script>
            // 假设一次生成20个li标签 如果没有图片，需要给li设置随机高度
            // 每次添加li 需要先判断哪个ul的高度最小，给最小的ul添加这个li标签
            var uls = document.querySelectorAll('ul');
            function list() {
                for (var i = 0; i < 20; i++) {
                    var h = Math.floor(Math.random() * 200) + 100;// 100-300
                    var li = document.createElement('li');
                    li.style.height = h + "px";
                    var ul = uls[0];
                    for (var k = 0; k < uls.length; k++) {
                        if (ul.offsetHeight > uls[k].offsetHeight) {
                            ul = uls[k];
                        }
                    }
                    ul.appendChild(li);
                }
            }
            list();
            var isShow = true;
            window.onscroll = function () {
                var htmlTop = document.documentElement.scrollTop;
                var bodyH = document.body.offsetHeight;
                var winH = window.innerHeight;
                /*  console.log('卷走的内容高度', htmlTop);
                 console.log('文档高度', bodyH);
                 console.log('视图窗口高度', winH); */
                if (htmlTop + winH >= bodyH - 100 && isShow) {
                    console.log('差不多到底了');
                    isShow = false;
                    setTimeout(function () {
                        isShow = true;
                    }, 500)
                    list();
                }
            }
        </script>
</body>

</html>